import React, {useState, useEffect} from 'react';
import {Row, Col, Button, Empty, Tooltip} from 'antd';
import {SearchOutlined} from '@ant-design/icons';
import './index.styl';
import moment from 'moment';
import {useUpdateEffect} from 'ahooks';
import {roomMessageMap} from '~/page/liveMonitor/config.js';
import RelatedClass from './RelatedClass';

const isDateFormat = date => {
    if (isNaN(date) && !isNaN(Date.parse(date))) {
        return true;
    }
    return false;
};
export default ({data, title, params}) => {
    const [columnList, setColumnList] = useState([]);
    const [value, setValue] = useState([]);
    const [modalVisible, setModalVisible] = useState(false);
    const {dashBoardId, unitId} = roomMessageMap.get(title);

    useUpdateEffect(() => {
        if (data && data[dashBoardId] && data[dashBoardId][unitId]) {
            setColumnList(data[dashBoardId][unitId].columnList || []);
            setValue(data[dashBoardId][unitId].value || []);
        }
    }, [data, dashBoardId, unitId]);


    const handleClick = () => {
        setModalVisible(true);
    };


    return (
        <div className="room-detail">
            {
                columnList?.length > 0
                    ?
                    columnList?.map((item, index) => {
                        const {id, name} = item;
                        if (name === '直播间类型') {
                            return (
                                <Row className={index === 0 && 'margin-top-8'} key={id}>
                                    <Col span={10}>{name}：</Col>
                                    <Col span={5}>{value[0][name]}</Col>
                                    <Col span={9}>
                                        <Button
                                            size="small"
                                            icon={<SearchOutlined />}
                                            type="link"
                                            className="related-class-btn"
                                            onClick={handleClick}
                                        >
                                            关联班级
                                        </Button>
                                    </Col>
                                </Row>
                            );
                        }
                        return (
                            <Row className={index === 0 && 'margin-top-8'} key={id}>
                                <Col span={10}>{name}：</Col>
                                <Col span={14}>
                                    {
                                        isDateFormat(value[0][name])
                                            ? moment(value[0][name]).format('YYYY-MM-DD HH:mm:ss')
                                            : value[0][name]
                                    }
                                </Col>
                            </Row>
                        );
                    })
                    : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            }

            {
                modalVisible && (
                    <RelatedClass
                        visible={modalVisible}
                        setVisible={setModalVisible}
                        params={params}
                    />
                )
            }
        </div>
    );
};
